<!--
 * @Author: huagen.yin huagen.yin
 * @Date: 2022-10-26 15:23:03
 * @LastEditors: huagen.yin huagen.yin
 * @LastEditTime: 2023-01-04 15:47:24
 * @FilePath: \spd-web-vue3.2\src\views\system\menu\view\iconsDialog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="layui-btn-container" style="height: 33px">
      <span
        :class="['iconfont', state.iconValue]"
        style="padding: 0 10px 0 0; font-size: 20px"
      ></span>
      <el-button :disabled="disabled" :plain="true" @click="openIconBox">{{
        $t('btn_choice')
      }}</el-button>
      <el-button v-if="state.iconValue" :plain="true" @click="reset">{{
        $t('btn_reset')
      }}</el-button>
    </div>
    <el-dialog
      :append-to-body="true"
      title="选择图标"
      v-model="state.dialogVisible"
      custom-class="dialogBox"
      :close-on-click-modal="false"
    >
      <div class="iconlist">
        <div class="icon" v-for="(item, index) in state.iconList" :key="index">
          <span :class="['iconfont', item]" @click="choseIcon(item)"></span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name="menuIconsDialog">
import iconList from '@/assets/js/icon.js'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
  },
})
const emit = defineEmits()
const state = reactive({
  dialogVisible: false,
  iconValue: '',
  iconList: iconList,
})
watch(
  () => props.modelValue,
  (val) => {
    console.log(12)
    state.iconValue = val
  },
  {
    deep: true,
    immediate: true,
  }
)

function reset() {
  state.iconValue = ''
  emit('returnBack', '')
}
function choseIcon(data) {
  state.iconValue = data
  emit('returnBack', data)
  state.dialogVisible = false
}
function openIconBox() {
  state.dialogVisible = true
}
</script>

<style scoped lang="scss">
.iconlist {
  display: block;
  position: relative;
  .icon {
    display: inline-block;
    width: 5%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    .iconfont {
      font-size: 24px;
    }
  }
}
</style>
